//引入重置样式
require('../../assets/css/reset.css')

//引入公共样式
require('../../assets/css/property.css')

//引入页面样式
require('./sports-data.less')

//引入封装的dom
require('../../assets/js/dom.js')

//复用的basic
require('../../assets/css/basic.less')

//获取axios工具函数
const request = require('../../utils/request')

//引入fonts字体图标
require('../../assets/fonts/iconfont.css')

//服务器地址
const API = 'http://fitness.h5.itsource.cn:3701'

const echarts = require('echarts')

function getMsg() {
    //如果错误显示信息提示框
    msg.style.display = 'block';

    // 计时器，1秒之后隐藏信息提示框
    setTimeout(() => {
        msg.style.display = 'none';
    }, 1000);
}

//等待dom加载完毕之后操作dom
document.ready(() => {
    //获取dom
    const arrow = document.querySelector('#arrow');
    const img = document.querySelector('#img');
    const minute = document.querySelector('#minute');
    const consume = document.querySelector('#consume');
    const msg = document.querySelector('#msg');

    //事件注册
    arrow.addEventListener('click', () => {
        location.href = './mine.html';
    })

    //获取用户信息
    function getUserInfo() {
        request.get('/api/user/info').then(res => {
            //1 解构数据
            let { errno, data } = res.data;
            //2 判断
            if (errno === 0) {
                //3 处理业务逻辑
                //图片渲染 服务器地址+相对路径+文件名
                img.src = API + data.imgUrl;
                //总运动
                minute.textContent = data.duration;
                //总消耗
                consume.textContent = data.calorie;
            } else {
                getMsg();
                msg.innerHTML = message;
            }
        })
    }
    //初始化调用一次
    getUserInfo();


    //获取用户运动数据
    function getUserSportsData() {
        request.get('/api/exercise').then(res => {
            //1 解构数据
            let { errno, data, message } = res.data;
            //2 判断
            if (errno === 0) {
                //抽离x轴的数据
                let xData = data.days.map(v => v.date.slice(5));
                // console.log(xData);
                // 抽离name
                let arr = ['count'];
                let series = arr.map(name => ({
                    name: name,
                    type: 'bar',
                    data: data.days.map(v => v[name]),
                }))
                renderBar(series, xData)
            } else {
                getMsg()
                msg.innerHTML = message;
            }

        })
    }
    getUserSportsData();

    //渲染函数 渲染dom更新dom
    function render(data) {}


    //渲染柱状图
    function renderBar(series, xData) {
        //1 创建实例对象
        const myChart = echarts.init(document.querySelector('#bar'))

        //2 写上配置项
        let option = {
            //标题组件
            title: {
                text: '近7天运动时长',
                left: 15,
                top: 15,
            },
            //提示框组件
            tooltip: {},
            //图例组件
            // legend: {},
            xAxis: {
                data: xData,
                //['11-5', '11-6', '11-7', '11-8', '11-9', '11-10', '11-11']
            },
            yAxis: {},
            //核心数据
            // series: [{
            //     name: '销量1',
            //     //type bar柱状图 pie饼图 line折线图
            //     type: 'bar',
            //     data: data,
            //     // [0, 20, 76, 10, 60, 80, 150]
            // }, ],
            series: series,
        }

        //3 载入配置
        myChart.setOption(option)
    }


    // renderBar(
    //     [25, 60, 30, 120, 90, 90, 60], ['11-5', '11-6', '11-7', '11-8', '11-9', '11-10', '11-11']
    // )

    //渲染饼图
    function renderPie() {
        //1 创建实例
        const myChart = echarts.init(document.querySelector('#pie'))

        //2 配置项
        let option = {
            title: {
                text: '运动分类',
                left: 15,
                top: 15,
            },
            tooltip: {
                trigger: 'item',
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                top: 'middle',
            },
            series: [{
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: [{
                        value: 25,
                        name: '跑步',
                        label: {
                            position: 'inside',
                            color: '#fff',
                            formatter: '{c}%',
                        },
                        itemStyle: {
                            color: '#736171',
                        },
                    },
                    {
                        value: 35,
                        name: '骑行',
                        label: {
                            position: 'inside',
                            color: '#fff',
                            formatter: '{c}%',
                        },
                        itemStyle: {
                            color: '#ee5c43',
                        },
                    },
                    {
                        value: 40,
                        name: '训练',
                        label: {
                            position: 'inside',
                            color: '#fff',
                            formatter: '{c}%',
                        },
                        itemStyle: {
                            color: '#58bb92',
                        },
                    },
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)',
                    },
                },
            }, ],
        }

        //3 导入配置
        myChart.setOption(option)
    }

    renderPie()

})